<template>
  <view class="container">
    <view class="form-container">
      <!-- 员工账号 -->
      <view class="form-item">
        <text class="label">员工账号(不可重复)</text>
        <input 
          class="input" 
          v-model="form.account" 
          placeholder="请输入员工账号"
          @blur="checkAccount"
        />
        <text class="error-tip" v-if="accountError">{{accountError}}</text>
      </view>
      
      <!-- 手机号 -->
      <view class="form-item">
        <text class="label">手机号(必填)</text>
        <input 
          class="input" 
          v-model="form.phone" 
          placeholder="请输入手机号"
          type="number"
          maxlength="11"
        />
        <text class="error-tip" v-if="!form.phone && submitted">手机号不能为空</text>
      </view>
      
      <!-- 密码 -->
      <view class="form-item">
        <text class="label">密码</text>
        <input 
          class="input" 
          v-model="form.password" 
          placeholder="请输入密码"
          password
        />
      </view>
      
      <!-- 管理员选项 -->
      <view class="form-item">
        <text class="label">是否为管理器</text>
        <switch 
          class="switch" 
          :checked="form.isAdmin" 
          @change="onAdminChange" 
          color="#4a8bf5"
        />
      </view>
    </view>
    
    <!-- 提交按钮 -->
    <view class="submit-btn" @click="handleSubmit">
      <text class="btn-text">提交</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        account: '',
        phone: '',
        password: '',
        isAdmin: false,
		type:'',
      },
      accountError: '',
      existingAccounts: ['zhangsan', 'lisi', 'admin'], // 模拟已存在的账号
      submitted: false
    }
  },
  methods: {
    // 检查账号是否重复
    checkAccount() {
      if (!this.form.account) {
        this.accountError = '账号不能为空';
        return;
      }
      
      /* if (this.existingAccounts.includes(this.form.account)) {
        this.accountError = '该账号已存在';
      } else {
        this.accountError = '';
      } */
    },
    
    // 管理员选项切换
    onAdminChange(e) {
      this.form.isAdmin = e.detail.value;
    },
    
    // 提交表单
    handleSubmit() {
      this.submitted = true;
      this.checkAccount();
      
      if (this.accountError || !this.form.phone) {
        uni.showToast({
          title: '请检查表单',
          icon: 'none'
        });
        return;
      }
      if(this.form.isAdmin){
		  this.form.type=1
	  }else{
		  this.form.type=2
	  }
      // 这里可以发送请求到后端
      console.log('提交表单:', this.form);
	 uni.showLoading({
	 	title: '加载中'
	 })
	  //uni.navigateBack()
	  this.$http('jeecg-boot/app/market/bicStoreAccount/add',{
	     account:this.form.account,
		 password:this.form.password,
		 phone:this.form.phone,
		 type:this.form.type
	  },'POST').then(res => {
	  	 uni.hideLoading();
		  if(res.success){
			  uni.showToast({
			    title: '提交成功',
			    icon: 'success'
			  });
			  uni.navigateBack()
		  }else{
			  uni.showToast({
			      title: res.message,
			  	 icon:'none',
			      duration: 3000,
			  });
		  }
		   this.submitted = false;
		
	  }).catch(err=>{
		   uni.hideLoading();
		   this.submitted = false;
	  })
     
      
      // 模拟提交后清空表单
      /* setTimeout(() => {
        this.form = {
          account: '',
          phone: '',
          password: '',
          isAdmin: false
        };
        this.submitted = false;
      }, 1500); */
    }
  }
}
</script>

<style scoped>
.container {
  padding: 40rpx;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.form-container {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.form-item {
  margin-bottom: 40rpx;
  position: relative;
}

.label {
  display: block;
  font-size: 30rpx;
  color: #333;
  margin-bottom: 20rpx;
  font-weight: 500;
}

.input {
  height: 80rpx;
  border: 1rpx solid #ddd;
  border-radius: 10rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}

.error-tip {
  position: absolute;
  bottom: -40rpx;
  left: 0;
  color: #ff4d4f;
  font-size: 24rpx;
}

.switch {
  transform: scale(0.8);
  transform-origin: left center;
}

/* 提交按钮 */
.submit-btn {
  margin-top: 60rpx;
  background: linear-gradient(to right, #4a8bf5, #6a5af9);
  border-radius: 50rpx;
  height: 90rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 8rpx 20rpx rgba(74, 139, 245, 0.3);
}

.btn-text {
  color: #fff;
  font-size: 32rpx;
  font-weight: bold;
}
</style>